<template>
  <view class="promo-banner">
    <view class="banner-content">
      <view class="main-text">
        <text class="big-text">11.11</text>
        <text class="subtitle">百亿补贴疯狂派发</text>
      </view>
      <view class="discount-tag">跨店满300减50</view>
      <view class="activity-time">活动时间: 11月1日-11月11日</view>
      <view class="grab-btn">抢</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PromoBanner'
};
</script>

<style scoped lang="scss">
@import "../../../static/common.scss";

.promo-banner {
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  position: relative;
  overflow: hidden;
}

.banner-content {
  color: white;
  position: relative;
  z-index: 2;
}

.main-text {
  margin-bottom: 20rpx;
}

.big-text {
  font-size: 60rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 32rpx;
  display: block;
}

.discount-tag {
  background-color: #ff4757;
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: inline-block;
  margin-bottom: 15rpx;
}

.activity-time {
  font-size: 24rpx;
  opacity: 0.9;
}

.grab-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ff4757;
  color: white;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  @include flex-center;
  font-size: 32rpx;
  font-weight: bold;
}
</style>